<template>
  <m-content class="dashboard">
    <template #header-right-text>
      <span class="menu" @click="toPage('dictionary')">单词</span>
      <!-- <span class="menu" @click="toPage('video')">台词</span> -->
    </template>

    <div class="content-wrapper">
      <p class="text">每日一句</p>
      <div class="word">
        <p class="en">{{ state.data.note }}</p>
        <p class="zh">{{ state.data.content }}</p>
      </div>
    </div>
  </m-content>
</template>

<script setup>
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
import { secondaryRoutes } from '@/router/index'
import globalApi from '@/http/api'

const api = {
  getDiarySentence: globalApi.diary.getDiarySentence,
}

const router = useRouter()
const state = reactive({
  data: {},
})

function init() {
  api.getDiarySentence().then((res) => {
    state.data = res.data
  })
}
init()

// 听写
function toPage(viewRoute) {
  const path = secondaryRoutes[viewRoute]
  router.push(path)
}
</script>
